<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="main-frame">
        <div class="sub-title">天然气数据录入<el-button class="save" type="primary" @click="setGasEntryData()">保存</el-button></div>
        <div>
          <el-date-picker
            v-model="selectWeek"
            placeholder="选择周"
            autocomplete="off"
            type="week"
            format="yyyy 第 WW 周"
            class="week-style"
            @change="changeWeek($event)"
          />
        </div>
        <table id="weather" class="weather">
          <thead>
            <td>日期</td>
            <td v-for="(item,index) of comingWeek" :key="index">{{ item }}</td>
          </thead>
          <tr>
            <td>制程</td>
            <td v-for="(item,index) of processing" :key="index">
              <input type="number" class="processing" :value="item">
            </td>
          </tr>
          <tr>
            <td>动力</td>
            <td v-for="(item,index) of huanAn" :key="index">
              <input type="number" class="huanAn" :value="item">
            </td>
          </tr>
          <tr>
            <td>生活</td>
            <td v-for="(item,index) of administration" :key="index">
              <input type="number" class="administration" :value="item">
            </td>
          </tr>
        </table>
      </div>

    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import 'element-ui/lib/theme-chalk/index.css'
export default {
  components: {
    MainTitle: () => import('@/components/MainTitle.vue')
  },
  data() {
    return {
      mainTitle: '能源监控-能源费用预算',
      runFlag: false,
      selectWeek: '',
      gasInfo: [],
      processing: new Array(7),
      huanAn: new Array(7),
      administration: new Array(7)
    }
  },
  computed: {
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    }),
    comingWeek() {
      const year = this.selectWeek ? new Date(this.selectWeek).getFullYear() : new Date().getFullYear()
      const month = this.selectWeek ? new Date(this.selectWeek).getMonth() : new Date().getMonth()
      const date = this.selectWeek ? new Date(this.selectWeek).getDate() - 2 : new Date().getDate()
      var dates = []
      const startDate = new Date(year, month, date)
      for (var i = 0; i <= 6; i++) {
        const weekItem = new Date(startDate.setDate(startDate.getDate() + 1))
        var y = weekItem.getFullYear()
        var m = weekItem.getMonth() + 1
        m = m < 10 ? '0' + m : m
        var d = weekItem.getDate()
        d = d < 10 ? ('0' + d) : d
        const item = y + '-' + m + '-' + d
        dates.push(item)
      }
      return dates
    },
    getParam() {
      return { begin_time: this.comingWeek[0], end_time: this.comingWeek[6] }
      // return { begin_time: '2020-05-19', end_time: '2020-05-25' }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getGasEntryData()
    })
  },
  methods: {
    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time))
    },
    changeWeek(e) {
      console.log(e)
      this.getGasEntryData()
    },
    async getGasEntryData() {
      try {
        this.runFlag = true
        const result = await this.service.getGasEntryData(this.getParam)
        if (result.flag === false) {
          this.$notify({
            title: '天然气数据获取出错',
            type: 'error',
            duration: 2500
          })
          this.runFlag = false
          return
        }
        this.gasInfo = result.data
        if (!this.gasInfo) {
          this.processing = new Array(7)
          this.huanAn = new Array(7)
          this.administration = new Array(7)
          this.runFlag = false
          return
        }
        console.log('天然气', this.gasInfo)
        this.getTableContent()
        this.runFlag = false
      } catch (e) {
        this.$notify({
          title: '天然气数据获取出错',
          type: 'error',
          duration: 2500
        })
        this.runFlag = false
      }
    },
    async setGasEntryData() {
      try {
        const params = []
        const tem = document.getElementsByClassName('processing')
        const max = document.getElementsByClassName('huanAn')
        const min = document.getElementsByClassName('administration')
        let obj = {}
        tem.forEach((item, index) => {
          obj = [
            { time: this.comingWeek[index], type: '制程', value: tem[index].value ? tem[index].value : 0 },
            { time: this.comingWeek[index], type: '动力', value: max[index].value ? max[index].value : 0 },
            { time: this.comingWeek[index], type: '生活', value: min[index].value ? min[index].value : 0 }
          ]
          params.push(...obj)
        })
        const result = await this.service.setGasEntryData(...params)
        if (result.flag === true) {
          this.$notify({
            title: '天然气数据保存成功',
            type: 'success',
            duration: 2500
          })
        } else {
          this.$notify({
            title: '天然气数据保存失败',
            type: 'error',
            duration: 2500
          })
          return
        }
        // this.gasInfo = result
        console.log('天然气', this.gasInfo)
      } catch (e) {
        this.$notify({
          title: '天然气数据保存出错',
          type: 'error',
          duration: 2500
        })
      }
    },
    getTableContent() {
      const processing = new Array(7)
      const huanAn = new Array(7)
      const administration = new Array(7)
      for (let i = 0; i < this.comingWeek.length; i++) {
        const item1 = this.gasInfo.find((e) => e.time === this.comingWeek[i] && e.type === '制程')
        if (item1) {
          processing[i] = item1.value
        }
        const item2 = this.gasInfo.find((e) => e.time === this.comingWeek[i] && e.type === '动力')
        if (item2) {
          huanAn[i] = item2.value
        }
        const item3 = this.gasInfo.find((e) => e.time === this.comingWeek[i] && e.type === '生活')
        if (item3) {
          administration[i] = item3.value
        }
      }
      this.processing = processing
      this.huanAn = huanAn
      this.administration = administration
      console.log(processing, huanAn, administration)
    }
  }
}
</script>

<style lang = "scss" scoped>
.mainbody{
  height: 100vh;
  background: url('~@assets/report/bg.png') no-repeat;
  background-size: 100% 100%;
}
  .loading{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba($color: #333, $alpha: 0.7);
    z-index: 9;
  }
.container{
  position: relative;
  width: 92%;
  height: 100%;
  margin: 0 auto;
}
.main-frame{
  width: 100%;
  height: 82%;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
  margin-top: 1rem;
  &::-webkit-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sub-title{
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  font-weight: 600;
  height: 3.5rem;
  line-height: 3.5rem;
  padding: 0 1rem;
  margin: 1rem 0;
  background: rgba(1, 121, 197, 0.3);
}
.week-style{
  width: 15rem;
  height: 3rem;
  padding: 0;
  margin-bottom: 1rem;
}
.save{
  width: 6rem;
  height: 3rem;
  color:white;
  align-self: center;
  background-color:#569fe9;
  border: 0;
  border-radius: 0;
  font-size: 1.2rem;
  padding: 0;
}
table{
  width: 100%;
  font-size: 1.3rem;
  thead{
    font-weight: 600;
    background: rgba($color: #125da8, $alpha: 0.5);
  }
  td{
    padding: 1rem;
    text-align: center;
    white-space: nowrap;
  }
}
td input{
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  text-align: center;
  width: 100%;
}
.weather tr{
  background:rgba(97,169,242,0.5);
}

</style>
<style lang="scss">
.el-input--prefix .el-input__inner{
  height: 3.5rem;
  color:white;
  background-color: #05417f  !important;
  border: 1px solid  !important;
  border-color:  #00a8ff !important;
  border-radius: 0;
}
//去掉type=number时，右边的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
   -webkit-appearance: none !important;
}
input[type="number"]{
  -moz-appearance:textfield;
}
</style>
